<template>
  <el-row class="tac">
    <div class="title">
      后台管理系统
    </div>
      <div >
        <div class="demo-type">
          <el-avatar
            :size="80"
            src="https://img2.baidu.com/it/u=1271668166,2654069709&fm=26&fmt=auto&gp=0.jpg"
          ></el-avatar>
          
        </div>
        <div class="username">admin</div>
      </div>

      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
         background-color="#02142B"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        border
        unique-opened
        :collapse="collapse"
        :collapse-transition="false"
      >

      <NavbarItem :menus=menus></NavbarItem>
      
      </el-menu>
    
  </el-row>
</template>
<script>
import NavbarItem from './NavbarItem'
export default {
 
  components:{
    NavbarItem
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  props: {
    menus: {
      type: Array,
      require: true
    },
    collapse:{
      type:Boolean,
      default:false,
      
    },
  }
};
</script>

<style scoped>

.el-menu[data-v-c735de7a] {
  text-align: left;
}
.el-menu {
  height: 70vh;
  border-right:none
  
}
.el-menu[data-v-c735de7a][data-v-c735de7a]{
text-align: center;
}
.demo-type{
  height: 15vh;
  display:flex;
  align-items: center;
  justify-content: center;
}
.title{
  color: aqua;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
    background-color:333;
   font-size:20px
}
.username{
  color: white;
}


</style>